<template>
	<div>
		<div class="assetInfo">
			<div>资产编号: {{ assetInfo.assetNum }}</div>
			<div>设备类型： {{ assetInfo.assetTypeName }}</div>
		</div>
		<el-form class="form-con" :model="form" label-suffix=": " ref="form" size="small">
			<el-table :data="form.tableData" border stripe>
				<el-table-column prop="changeType" label="变更项">
					<template slot-scope="{ row }">
						<el-select v-model="row.changeType" placeholder="请选择" :disabled="!isEdit" clearable filterable @change="typeHandler($event, row)">
							<el-option v-for="item in colOpt" :key="item.value" :label="item.name" :value="item.value"> </el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="oldContent" label="现内容"> </el-table-column>
				<el-table-column prop="newContent" label="变更后内容">
					<template slot="header">
						<span style="color: red">*</span>
						<span>变更后内容</span>
					</template>
					<template slot-scope="{ row, $index }">
						<!-- <el-form-item class="form-item-column" :prop="'tableData.' + $index + '.hostNameCn'" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
							<el-input v-model="row.hostNameCn" placeholder="请输入" clearable></el-input>
						</el-form-item> -->
						<div v-if="row.changeType == 'hostIp' || row.changeType == 'hostPlace'">
							需要管理员分配，您可以在备注中说明诉求
						</div>
						<el-form-item v-else class="form-item-column" :prop="`tableData.${$index}.newContent`" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
							<el-select v-if="row.changeType == 'safeZone'" v-model="row.newContent" placeholder="请选择" :disabled="!isEdit" clearable filterable>
								<el-option v-for="item in safeZoneTypeOpt" :key="item.oid" :label="item.name" :value="item.oid"> </el-option>
							</el-select>
							<el-select v-else-if="row.changeType == 'beSystem'" v-model="row.newContent" placeholder="请选择" :disabled="!isEdit" clearable filterable>
								<el-option v-for="item in beSystemOpt" :key="item.id" :label="item.name" :value="item.name"> </el-option>
							</el-select>
							<el-input v-else v-model="row.newContent" placeholder="请输入" :disabled="!isEdit" clearable></el-input>
						</el-form-item>
						<!-- <el-form-item
							v-else-if="row.changeType == 'safeZone'"
							class="form-item-column"
							:prop="`tableData.${$index}.newContent`"
							:rules="[{ required: true, message: '请选择', trigger: 'change' }]"
						>
							<el-select v-model="row.newContent" placeholder="请选择" :disabled="!isEdit" clearable filterable>
								<el-option v-for="item in safeZoneTypeOpt" :key="item.id" :label="item.name" :value="item.code"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							v-else-if="row.changeType == 'beSystem'"
							class="form-item-column"
							:prop="`tableData.${$index}.newContent`"
							:rules="[{ required: true, message: '请选择', trigger: 'change' }]"
						>
							<el-select v-model="row.newContent" placeholder="请选择" :disabled="!isEdit" clearable filterable>
								<el-option v-for="item in beSystemOpt" :key="item.id" :label="item.name" :value="item.name"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-else class="form-item-column" :prop="`tableData.${$index}.newContent`" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
							<el-input v-model="row.newContent" placeholder="请输入" :disabled="!isEdit" clearable></el-input>
						</el-form-item> -->
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注">
					<template slot-scope="{ row }">
						<el-input v-model="row.remark" placeholder="请输入" :disabled="!isEdit" clearable></el-input>
					</template>
				</el-table-column>
				<el-table-column v-if="isEdit" width="60" label="操作" align="center">
					<template v-slot="scope">
						<el-button class="text-btn-table" type="text" size="medium" @click="removeItem(scope.$index)">移除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<template v-if="isEdit">
			<div style="margin-top: 10px">
				<el-button class="text-btn-table" icon="el-icon-circle-plus" type="text" size="medium" @click="addItem">添加变更项</el-button>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onsubmit" size="small">确 定</el-button>
			</div>
		</template>
	</div>
</template>

<script>
	import { selectDictItems } from '@/system/api/dictionaryManage'
	import assetChangeApi from '@/api/assetChangeApi'
	import { getAction } from '@/utils/httpUtil'
	import assetApi from '@/api/assetApi'
	import assetPutawayApi from '@/api/assetPutawayApi'
	export default {
		name: 'ChangeWin',
		props: {
			assetInfo: {
				type: Object,
				default: () => {
					return {}
				},
			},
			assetManageId: {
				default: '',
			},
			isEdit: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				form: {
					tableData: [],
				},
				colOpt: [
					{ name: '主机名', value: 'hostName' },
					{ name: '主机中文名', value: 'hostNameCn' },
					{ name: 'IP地址', value: 'hostIp' },
					{ name: '位置', value: 'hostPlace' },
					{ name: '安全区域', value: 'safeZone' },
					{ name: '业务系统', value: 'beSystem' },
				],
				safeZoneTypeOpt: [],
				beSystemOpt: [],
			}
		},
		mounted() {
			if (!this.isEdit) {
				getAction(assetChangeApi.changeDetial, { assetId: this.assetInfo.hisId, assetManageId: this.assetManageId }).then(res => {
					if (res.success) {
						this.form.tableData = res.info
					}
				})
			} else {
				this.form.tableData = this.assetInfo.assetChangeList
			}
			// 安全区域
			// selectDictItems({ code: 'safeZoneType' }).then(res => {
			// 	this.safeZoneTypeOpt = res.info
			// })
			this.commonLoadDic('安全区域', 'safeZoneTypeOpt')
			// 业务系统
			// selectDictItems({ code: 'beSystem' }).then(res => {
			// 	this.beSystemOpt = res.info
			// })
			this.beSystemOpt = []
			getAction(assetPutawayApi.selectSystem).then(res => {
				if (res.info) {
					res.info.forEach((item, index) => {
						this.beSystemOpt.push({
							id: index,
							name: item,
						})
					})
				}
			})
		},
		methods: {
			commonLoadDic(type, objStr) {
				getAction(assetApi.asset.queryByCode, { name: type }).then(res => {
					this[objStr] = res.info
				})
			},
			typeHandler(value, row) {
				if (row.changeType == 'safeZone') {
					row.oldContent = this.assetInfo[`${row.changeType}Name`]
				} else {
					row.oldContent = this.assetInfo[row.changeType]
				}
				row.newContent = ''
			},
			handleOldContent(row) {
				if (row.changeType == 'safeZone' || row.changeType == 'beSystem') {
					return ''
				}
			},
			addItem() {
				if (!this.form.tableData) {
					this.form.tableData = []
				}
				this.form.tableData.push({ newContent: '' })
			},
			removeItem(index) {
				this.form.tableData.splice(index, 1)
			},
			cancel() {
				this.$emit('oncancel')
			},
			onsubmit() {
				let list = this.form.tableData.filter(item => {
					return !!item.changeType
				})
				if (!list || list == 0) {
					this.$message.error('请添加变更项')
					return
				}
				this.$refs.form.validate(valid => {
					if (valid) {
						this.$emit('onsubmit', list)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.assetInfo {
		display: flex;
		div {
			flex: 1;
		}
	}
	.dialog-footer {
		margin-top: 15px;
		text-align: center;
	}
</style>
